<template>
  <div>
    <h2>修改count值案例</h2>
    <div>count: {{ $store.state.vuextest.count }}</div>
    <div>count: {{ count }}</div>
    <div>tenflodCount: {{ $store.getters['vuextest/tenflodCount'] }}</div>
    <div>tenflodCount: {{ tenflodCount }}</div>
    <button @click="increment">加1</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'

// console.log(   mapActions('vuextest', ['increment'])   )
// console.log(   mapGetters('vuextest', ['tenflodCount'])   )
// console.log(   mapMutations('vuextest', ['ADD'])   )

export default {
  name: "VuexTest",
  computed: {
    ...mapState({
      count: state => state.vuextest.count
    }),
    // 参数一: 命名空间的名称
    // 参数二: 数组,数组中放 该命名空间下的getters函数
    ...mapGetters('vuextest', ['tenflodCount'])
  },
  mounted() {
    console.log(this.$store)

    // 调用mutaions
    setTimeout(() => {
      this.$store.commit('vuextest/ADD')
    }, 2000)
  },
  methods: {
    // 普通调用
    // increment() {
    //   // console.log(this.$store)
    //   this.$store.dispatch('vuextest/increment')
    // },

    // 参数一: 命名空间的名称
    // 参数二: 数组,数组中放 该命名空间下的actions函数
    ...mapActions('vuextest', ['increment'])
  }
}
</script>

<style scoped>

</style>